<template>
  <div>
    <div class="page-title">{{ $route.meta.title }}</div>
    <div class="know-container">
      <data-tables
        v-loading="loading"
        :data="AdminsData"
        :table-props="tableProps"
        align="left"
        :show-action-bar="false"
        :custom-filters="customFilters"
        :pagination-def="paginationDef"
      >
        <el-row slot="custom-tool-bar" style="margin-bottom: 10px" class="class_el_row">
          <el-col :span="24" class="text-align-left">
            <el-button type="primary" @click="goSeed">新建账号</el-button>

            <el-input
              v-model="customFilters[0].vals"
              prefix-icon="el-icon-search"
              placeholder="搜索姓名/账号名"
              class="class_input_width"
            ></el-input>
          </el-col>
        </el-row>

        <el-table-column prop="Username" label="姓名" key="Username" sortable="custom">
          <template slot-scope="scope">
            <div class="blue cursor" @click="details(scope)">
              <b>{{scope.row.Username}}</b>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="Name" label="账号名" key="Name" sortable="custom"></el-table-column>

        <el-table-column prop="Role" label="角色" key="Role" sortable="custom">
          <template slot-scope="scope">
            <div v-if="scope.row.RoleID">{{scope.row.Role.DisplayName}}</div>
            <div v-else>暂无角色</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="operation_box">
              <span @click="edit(scope.row)">编辑</span>
              <!-- <span @click="locks(scope.row)">锁定</span> -->
              <span @click="deletes(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </data-tables>
    </div>
    <el-dialog title="角色详情" :visible.sync="previewcol" class="previewcol">
      <div class="cl-box" style="width:100%;">
        <div class="cl-row">
          <div class="cl-td">
            <p>姓名</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Username}}</p>
          </div>
        </div>

        <div class="cl-row">
          <div class="cl-td">
            <p>账号名</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Name}}</p>
          </div>
        </div>

        <div class="cl-row">
          <div class="cl-td">
            <p>角色</p>
          </div>
          <div class="cl-td" v-if="colshowlog.RoleID">
            <p>{{colshowlog.Role.DisplayName}}</p>
          </div>
          <div class="cl-td" v-else>
            <p>暂无角色</p>
          </div>
        </div>

        <div class="cl-row">
          <div class="cl-td">
            <p>创建时间</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.CreatedAt}}</p>
          </div>
        </div>
      
        <div class="cl-row">
          <div class="cl-td">
            <p>QQ</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.QQ}}</p>
          </div>
        </div>
        
        <div class="cl-row">
          <div class="cl-td">
            <p>电话</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Tel}}</p>
          </div>
        </div>
        
        <div class="cl-row">
          <div class="cl-td">
            <p>邮件</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Email}}</p>
          </div>
        </div>  

        
        <div class="cl-row">
          <div class="cl-td">
            <p>支付宝名称</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Alipay_user}}</p>
          </div>
        </div>  

        
        <div class="cl-row">
          <div class="cl-td">
            <p>支付宝账户</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Alipay_acc}}</p>
          </div>
        </div>  

                
        <div class="cl-row">
          <div class="cl-td">
            <p>单价</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Price}}</p>
          </div>
        </div>  

                
        <div class="cl-row">
          <div class="cl-td">
            <p>推广网站</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Website}}</p>
          </div>
        </div>  
                
        <div class="cl-row">
          <div class="cl-td">
            <p>安装包地址</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Package_url}}</p>
          </div>
        </div>  
                
        <div class="cl-row">
          <div class="cl-td">
            <p>扣量</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Sub_rate}}</p>
          </div>
        </div>  
                
        <div class="cl-row">
          <div class="cl-td">
            <p>扣量起点</p>
          </div>
          <div class="cl-td">
            <p>{{colshowlog.Sub_start}}</p>
          </div>
        </div>  

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="previewcol = false">取 消</el-button>
        <el-button type="primary" @click="edit(colshowlog)">编 辑</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import api from "@/utils/api";
export default {
  components: {},
  data() {
    return {
      loading: false,
      tableProps: {
        border: false, //去掉边框
        stripe: false //去掉斑马纹
      },
      customFilters: [
        {
          vals: "",
          props: ["Username", "Username"]
        },
        {
          vals: "",
          props: ["Name", "Name"]
        },
        {
          vals: []
        }
      ],
      //分页设置
      paginationDef: {
        pageSize: 10,
        pageSizes: [10, 20, 50]
      },
      dialogVisible: false,
      save_id: null,
      previewcol: false,
      //存放弹出框的数据
      colshowlog: {}
    };
  },
  computed: {
    ...mapState(["AdminsData"])
  },
  methods: {
    ...mapActions(["getAdmins"]),
    deletes(row) {
      this.$confirm("真的要删除此账号吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.loading = true;
          const data = await api.deleteAdmins(row.ID);
          if (data.status) {
            this.$message({
              message: data.msg,
              type: "success"
            });
          } else {
            this.$message.error(data.msg);
          }
          this.getData();
          this.loading = false;
        })
        .catch(() => {});
    },
    locks(row) {
      this.$confirm("真的要锁定此账号吗？", "锁定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.loading = true;
          const data = await api.deleteAdmins(row.ID);
          if (data.status) {
            this.$message({
              message: data.msg,
              type: "success"
            });
          } else {
            this.$message.error(data.msg);
          }
          this.getData();
          this.loading = false;
        })
        .catch(() => {});
    },

    details(scope) {
      this.colshowlog = scope.row;
      this.previewcol = true;
    },
    async getData() {
      if (this.AdminsData.length == 0) {
        this.loading = true;
      }
      await this.getAdmins();
      this.loading = false;
    },
    goSeed() {
      this.$router.push({
        name: "AddClient"
      });
    },
    edit(row) {
      this.$router.push({
        name: "EditClients",
        params: {
          id: row.ID
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.AddGroup {
  color: rgb(60, 152, 255);
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;

  &-div {
    margin-top: 10px;

    &-input {
      width: 40%;
    }

    &-add {
      color: rgb(60, 152, 255);
      font-size: 14px;
      margin-top: 10px;
      cursor: pointer;
      margin-left: 15px;
    }
  }
}

.class_input_width {
  width: 350px;
}

.operation_box span {
  cursor: pointer;
  color: #8e9ebb;
  margin-right: 10px;
}
</style>
